@use '../core' as *;

.searchBox {
    display: flex;
    border-radius: var(--radius-md);
    cursor: text;
    #{$selector-darkmode} & {
        input {
            background: color-mix(in srgb, var(--color-bg-primary), var(--color-fg-primary) 6%);

            &::placeholder {
                color: rgba(255, 255, 255, 0.6);
            }
        }
    }
}

.searchIcon {
    --icon-size: 28px;
    --color-icon: var(--color-fg-secondary);

    position: absolute;
    top: 24px;
    left: 24px;
}

input[type='search'].searchInput {
    width: 100%;
    padding: $spacing-size-6 $spacing-size-6 $spacing-size-6 $spacing-size-16;
    font-size: 20px;
    border: none;
    outline: none;
    box-shadow: none;

    &:focus,
    &:focus-visible {
        box-shadow: none !important; // !important required to override complex input focus selectors
    }

    &::placeholder {
        color: var(--color-fg-quinary);
    }

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
        display: none;
    }
}
